<template>
    <div :style="carStyle">
        <el-form ref="searchform" :inline="true" :model="searchForm" :rules="rules" label-width="180" :size="obj.size"
            class="filterform">
            <el-form-item :label="obj.title">
                <el-col :span="11">
                    <el-form-item prop="beginTime">
                        <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.beginTime" style="width: 100%;"
                            value-format="yyyy-MM-dd" v-if="obj.group == 0" />
                        <el-date-picker type="month" placeholder="请选择月" v-model="searchForm.beginTime" style="width: 100%;"
                            value-format="yyyy-MM-dd" v-if="obj.group == 1" />
                    </el-form-item>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                    <el-form-item prop="endTime">
                        <el-date-picker type="date" placeholder="选择时间" v-model="searchForm.endTime" style="width: 100%;"
                            value-format="yyyy-MM-dd" v-if="obj.group == 0" />
                        <el-date-picker type="month" placeholder="请选择月" v-model="searchForm.endTime" style="width: 100%;"
                            value-format="yyyy-MM-dd" v-if="obj.group == 1" />
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="findSearchHandle('searchform')">查询</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "DateSearch",
    props: {
        obj: Object,
    },
    data() {
        return {
            carStyle: {},
            rules: {
                beginTime: [
                    { required: true, message: '请选择开始时间', trigger: 'change' }
                ],
                endTime: [
                    { required: true, message: '请选择结束时间', trigger: 'change' }
                ],
            },
            searchForm: {
                beginTime: "",
                endTime: "",
            }
        }
    },
    mounted() {
        this.setStyle();
        this.dataStr = JSON.stringify(this.obj.tableData);
    },
    methods: {
        setStyle() {
            var style = this.obj.style;

            var backgroundColor = "";
            var backgroundImage = "";
            // 背景颜色
            if (style.backgroundImage.length) {
                backgroundImage = `url(${style.backgroundImage}`;
            } else if (style.backgroundColor.length > 0) {
                backgroundColor = style.backgroundColor;
            }

            var boxShadow = "";
            if (style.boxShadow) {
                boxShadow = `${style.boxShadow.h}px ${style.boxShadow.v}px ${style.boxShadow.blur}px ${style.boxShadow.spreed}px ${style.boxShadow.color}`
            }

            this.carStyle = {
                boxShadow,
                width: "100%",
                height: "100%",
                display: "flex",
                backgroundSize: "100% 100%",
                borderStyle: "solid",
                backgroundImage,
                backgroundColor,
                color: style.color,
                fontSize: style.fontSize + "px",
                justifyContent: 'center',
                alignItems: 'center',
                borderColor: style.borderColor,
                borderWidth: style.borderWidth + "px",
                borderRadius: style.borderRadius + "px",
                fontWeight: style.fontWeight,
                fontStyle: style.fontStyle,
                flexDirection: "",
            }

            // #region 新的背景颜色

            if (this.obj.style.bgcolorType == "image") {
                this.carStyle.backgroundImage = backgroundImage;
            } else if (this.obj.style.bgcolorType == "gradient") {
                if (this.obj.style.gradient.isRadial) {
                    this.carStyle.backgroundImage = `radial-gradient(${this.obj.style.gradient.colorStart}, ${this.obj.style.gradient.colorEnd})`;
                } else {
                    this.carStyle.backgroundImage = `linear-gradient(${this.obj.style.gradient.fontAngle}deg, ${this.obj.style.gradient.colorStart}, ${this.obj.style.gradient.colorEnd})`;
                }
            } else {
                this.carStyle.backgroundColor = backgroundColor;
            }

            // #endregion
        },
        findSearchHandle(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // console.log(this.searchForm);

                    if (this.obj.bindIds.length) {
                        this.$emit("dateSearchHandle", this.searchForm.beginTime, this.searchForm.endTime, this.obj.bindIds);
                    }

                }
            });
        },
    },
    watch: {
        obj: {
            handler(newVal, oldVal) {
                this.setStyle();
            },
            deep: true,  // 深度监听
        }
    },
}
</script>

<style lang="scss">
.filterform {
    .line {
        text-align: center;
    }

    .el-form-item {
        margin-bottom: 0;
    }

    .el-form-item__content .el-form-item {
        margin-bottom: 0;
        margin-right: 0;
    }

    .el-form-item__label {
        color: inherit;
    }
}
</style>